<template>
  <div class="layout">
    <header class="header">
      <h1>清淤能枢 · 智能监测控制系统</h1>
      <div class="header-actions">
        <MockScenarioSwitch />
        <button class="btn" @click="toggleMock">{{ useMock ? '切换为后端' : '切换为Mock' }}</button>
      </div>
    </header>

    <main class="main">
      <section class="grid">
        <RealTimePanel class="card" />
        <SensorStatus class="card" />
        <HistoryChart class="card card-wide" />
        <EnergyMap class="card" />
      </section>
    </main>

    <footer class="footer">
      <ExportButton />
      <span class="muted">© 2025 清淤能枢</span>
    </footer>
  </div>
  
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import RealTimePanel from './components/RealTimePanel.vue';
import HistoryChart from './components/HistoryChart.vue';
import SensorStatus from './components/SensorStatus.vue';
import EnergyMap from './components/EnergyMap.vue';
import ExportButton from './components/ExportButton.vue';
import MockScenarioSwitch from './components/MockScenarioSwitch.vue';

const useMock = ref<boolean>(localStorage.getItem('useMock') === '1');
watch(useMock, (v) => localStorage.setItem('useMock', v ? '1' : '0'));

function toggleMock() {
  useMock.value = !useMock.value;
  window.dispatchEvent(new CustomEvent('qingyu:mock-toggle', { detail: useMock.value }));
}
</script>

<style scoped>
.layout {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid #e5e7eb;
}
.header h1 {
  font-size: 18px;
  margin: 0;
}
.header-actions { display: flex; gap: 8px; }
.btn {
  padding: 6px 10px;
  border: 1px solid #d1d5db;
  background: #fff;
  border-radius: 6px;
  cursor: pointer;
}
.btn:hover { background: #f3f4f6; }
.main { padding: 16px; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 16px;
}
.card { grid-column: span 4; background: #fff; border: 1px solid #e5e7eb; border-radius: 10px; padding: 12px; }
.card-wide { grid-column: span 8; }
.footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-top: 1px solid #e5e7eb;
}
.muted { color: #6b7280; font-size: 12px; }
</style>


